<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据资产管理平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />

	<!-- Google Font -->
	<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,800" rel="stylesheet"> -->

	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="assets/font/iconfont.css">


	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />
	<link href="./assets/layui/css/layui.css" rel="stylesheet">
	<style>
		body {
			font-size: 17px;
		}

		.nav-item .active {
			font-weight: 600;
		}

		/* 修改header的样式 */
		.nav-link {
			color: #353c58 !important;
		}

		.navbar-dark .navbar-brand:hover,
		.navbar-dark .navbar-brand:focus {
			color: #FF6A00;
		}

		.btn-outline-white:hover {
			background-color: rgba(244, 244, 244, 0.7);
			border-color: #FF6A00 !important;
		}

		.navbar-dark .navbar-brand {
			color: #353c58;
		}

		.navbar {
			background-color: rgba(244, 244, 244, 0.5);
		}

		.nav-link.active {
			color: #FF6A00 !important;
		}

		.nav-link.active,
		.nav-link.active1 {
			color: #FF6A00 !important;
		}

		.page-item.active .page-link {
			z-index: 1;
			color: #fff;
			background-color: #FF6A00;
			border-color: #FF6A00;
		}

		/* end */

		.layui-form-label {
			width: 25%;
			margin-right: 5%;
		}

		.layui-input,
		.layui-textarea {
			width: 70%;
		}
		.layui-form .el-cascader {
		    width: 70% !important;
		}
	</style>
</head>

<body>

	<!----------------------------------------------------------------------
	NAVBAR (remove topnav if you don't want changed nav background on scroll)
	------------------------------------------------------------------------>
	<nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="./index.html"><i class="iconfont icon-globe1 mr-2" style="font-size: 20px;"></i><strong>数据资产管理</strong>
			</a>
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="navbar-collapse collapse" id="navbarColor02">
				<ul class="navbar-nav mr-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link" href="./index.html">门户首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./dataResources.html">公开数据</a>
					</li>
<!--					<li class="nav-item dropdown">-->
<!--						<a class="nav-link" href="#">数据产品 </a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./serviceStore.html">服务产品</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./customShop.html">定制数据</a>-->
<!--					</li>-->
					<li class="nav-item">
						<a class="nav-link" href="./developer.html">平台介绍</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./newMessage.html">平台资讯</a>
					</li>
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./accessData.html">数据访问</a>-->
<!--					</li>-->
					<li class="nav-item highSerachBtn">
						<div class="col pt-4 pb-4">
							<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"
								style="color: #353c58 !important;border-color: #353c58;"><span class="iconbox border-0"
									style="margin-right: 5px;"><i class="iconfont icon-search" style="font-size: 20px;"></i></span>搜索</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto d-flex align-items-center">
<!--					<li class="nav-item">-->
<!--						<a class="nav-link  myBtn" href="#">-->
<!--							<span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-cart-arrow-down"></i></span>产品袋-->
<!--						</a>-->
<!--					</li>-->
					<li class="nav-item">
						<a class="nav-link" href="./mySpace.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-bxs-book-reader"></i></span>用户中心 </a>
					</li>
					<li class="nav-item disabledNone" id="userInfo">
						<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
							<li class="layui-nav-item">
							  <a href="javascript:;" style="color: #353c58 !important;">
								  <span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>
								  用户：<span id="accunt">登录过期</span>
							  </a>
							  <dl class="layui-nav-child">
								<dd><a href="./changePassword.html">修改密码</a></dd>
								<dd><a href="" id="logOutBtn">退出登录</a></dd>
							  </dl>
							</li>
						  </ul>
					</li>
					<li class="nav-item disabledNone" id="attestation">
						<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
					</li>
					<li class="nav-item disabledNone noUser">
						<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>登录 </a>
					</li>
					<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="#">
							<a class="btn btn-success btn-round shadow-sm text-white" href="./register.html">
								<i class="iconfont icon-github"></i> 立即注册 <a href="#" class="downloadzip" class="hidden"></a>
							</a>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->


	<!-------------------------------------- HEADER --------------------------------------->
	<div class="jumbotron jumbotron-fluid mb-3 bg-primary position-relative"
		style="background-color: #FF6A00 !important;">
		<div class="container text-white h-100 tofront">
			<div class="row align-items-center justify-content-center text-center">
				<div class="col-md-10">
					<h1 class="display-3">数据搜索</h1>
				</div>
			</div>
		</div>
	</div>
	<!-- End Header -->


	<!-------------------------------------- MAIN --------------------------------------->
	<div class="container pt-5 pb-5 mb-5">
		<form class="layui-form" lay-filter="serachForm">
			<div class="layui-form-item">
				<label class="layui-form-label">我要搜索</label>
				<div class="layui-input-block">
					<input type="radio" name="dataType" value="0" title="数据资源" checked  lay-filter="dataType">
					<input type="radio" name="dataType" value="1" title="数据产品"  lay-filter="dataType">
					<input type="radio" name="dataType" value="2" title="数据目录"  lay-filter="dataType">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">限定范围</label>
				<div class="layui-input-block">
					<input type="radio" name="limitScope" value="0" title="无条件共享">
					<input type="radio" name="limitScope" value="1" title="需要授权">
					<input type="radio" name="limitScope" value="2" title="需要确权">
					<input type="radio" name="limitScope" value="3" title="需要确权授权">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">搜索范围</label>
				<div class="layui-input-block">
					<input type="radio" name="searchType" value="0" title="所属用户&nbsp;&nbsp;&nbsp;&nbsp" lay-filter="searchType" >
					<input type="radio" name="searchType" value="1" title="所属类别" lay-filter="searchType" >
					<input type="radio" name="searchType" value="2" title="关键字" lay-filter="searchType" >
				</div>
			</div>
			<div class="layui-form-item disabledNone selectUsersBox">
				<label class="layui-form-label">所属用户</label>
				<div class="layui-input-block">
					<select class="form-control selectUsers" name="ownUserId" lay-search>
						<option value="">请选择</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item disabledNone selectTypeBox">
				<label class="layui-form-label">所属分类</label>
				<div class="layui-input-block" style="margin-left: 120px;">
					<input id="typeDataList" readonly style="display: block;width: 70%;height: calc(2.3rem + 2px);padding: 0.35rem 1.2rem;font-size: 1rem;line-height: 1.6;border: 1px solid #ced4da;"/>
				</div>
			</div>
			<!-- <div class="layui-form-item disabledNone selectTypeBox">
				<label class="layui-form-label">所属类别：</label>
				<div class="layui-input-block" style="margin-left: 120px;" id="typeDataList"></div>
			</div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">我有授权码</label>
				<div class="layui-input-block">
					<input type="text" name="authorization"
						autocomplete="off" placeholder="请输入授权码" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">关键字搜索</label>
				<div class="layui-input-block">
					<input type="text" name="keyword" autocomplete="off"
						placeholder="请输入关键字" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<button class="layui-btn searchData" style="background-color: #FF6A00;">开始搜索</button>
			</div>
		</form>
		<blockquote class="layui-elem-quote layui-text isShow disabledNone">
			共搜到符合要求的结果 <span id="dataCount">0</span>条
		</blockquote>

		<div class="card-deck card-pricing ServiceProduct isShow">
			<table class="layui-table disabledNone" id="productTable">
				<thead class="thead-dark">
					<tr>
						<th scope="col" style="width: 60px;">序号</th>
						<th scope="col">资源/产品名称</th>
						<th scope="col">访问量/总申购</th>
						<th scope="col">所属分类</th>
						<th scope="col">所属用户</th>
						<th scope="col">提供单位</th>
						<th scope="col">注册日期</th>
						<th scope="col">简介</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
			<table class="layui-table disabledNone" id="catalogueTable">
				<thead class="thead-dark">
					<tr>
						<th scope="col" style="width: 60px;">序号</th>
						<th scope="col">数据资源</th>
						<th scope="col">资源表</th>
						<th scope="col">表别名</th>
						<th scope="col">表关键字</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
			<div id="TablePage" style="text-align: right;width: 100%;"></div>
		</div>

	</div>




	<!-------------------------------------- FOOTER 底部 --------------------------------------->

	<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #FF6A00;">
		<div class="container">
			<div class="row" style="text-align: center;">
				<div class="col-12 col-md mr-4">
					<small class="d-block mt-3 text-muted" style="color: white !important;">

						<p style="color: white;margin-top: 10px;font-size: 30px;margin-bottom: 1rem;">数据资产管理平台</p>
						Copyright @ 2024 数据资产管理平台-版权所有 蜀ICP备202423603号
					</small>
				</div>
			</div>
		</div>
	</footer>
	<!-- End Footer -->



	<!-------------------------------------- JAVASCRIPTS --------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="vendor/popper.min.js" type="text/javascript"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>
	<script src="./assets/layui/cascader/cascader.js" type="text/javascript"></script>
	<script src="js/header.js" type="text/javascript"></script>
	<!-- Animation -->
	<script src="vendor/aos.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});

	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>
	<script>
		//改变搜索类型
		layui.form.on('radio(dataType)', function(data){
			if(data.value == 1){
			  getSelectType1();
			}else{
			  getSelectType2();
			}
			selectTypeIdList = []
		});
		//改变搜索范围
		layui.form.on('radio(searchType)', function(data){
		  if(data.value == 0){
			  $(".selectUsersBox").removeClass("disabledNone");
			  $(".selectTypeBox").addClass("disabledNone");
			  getSelectUsers();
		  }else if(data.value == 1){
			  $(".selectUsersBox").addClass("disabledNone");
			  $(".selectTypeBox").removeClass("disabledNone");
			  let formData = layui.form.val("serachForm");
			  if(formData.dataType == 1){
				  getSelectType1();
			  }else{
				  getSelectType2();
			  }
		  }else if(data.value == 2){
			  $(".selectUsersBox").addClass("disabledNone");
			  $(".selectTypeBox").addClass("disabledNone");
		  }
		});
		var selectTypeIdList = [];
		function setSelectTypeRender(data){
			$("#typeDataList").siblings().remove();
			var cas =layui.layCascader({
			  elem: '#typeDataList',
			  clearable: true,
			  options: data,
			  props: {
			    multiple: true,
				checkStrictly: true
			  },
			  value:selectTypeIdList
			});
			cas.changeEvent(function (value, node) {
				selectTypeIdList = value;
			});
		}
		//所属分类复选框绑定事件
		// layui.form.on('checkbox(typeItme)', function(data){
		//   if(data.elem.checked){
		// 	  selectTypeIdList.push(data.value)
		//   }else{
		// 	  let result = selectTypeIdList.filter(item => {
		// 	    return item != data.value;
		// 	  })
		// 	  selectTypeIdList = result;
		//   }
		// });
		//获取所属用户选择数据
		function getSelectUsers(){
			$.ajax({
       timeout:30000,
				url: window.Http + "/system/user/list/select",
				type: 'GET',
				headers: {
					'Authorization': "Bearer " + sessionStorage.getItem('Token')
				},
				data:{userName:""},
				success: function (res) {
					if (res.code == 200) {
						$(".selectUsers").empty();
						if (res.rows && res.rows.length > 0) {
							let html = `<option  value="">请选择</option>`;
							res.rows.forEach(function (val, index) {
								html += `<option value="${val.userId}">${val.nickName}</option>`
							})
							$(".selectUsers").append(html);
						}else{
							let html = `<option value="">请选择</option>`
							$(".selectUsers").append(html);
						}
						layui.form.render();
					}
				}
			})
		}

		//获取所属产品分类选择数据
		function getSelectType1(){
			$.ajax({
       timeout:30000,
				url: window.Http + "/productType/list/all",
				type: 'GET',
				headers: {
					'Authorization': "Bearer " + sessionStorage.getItem('Token')
				},
				success: function (res) {
					if (res.code == 200) {
						let dealDataArr = function(data){
							data.forEach(function (item, index) {
								item.label= item.typeName;
								item.value= item.id;
								item.children = item.childrenList;
								if(item.childrenList && item.childrenList.length>0){
									dealDataArr(item.childrenList);
								}
							})
						}
						dealDataArr(res.data);
						setSelectTypeRender(res.data);
					}
				}
			})
		}
		//获取所属数据通道分类选择数据
		function getSelectType2(){
			$.ajax({
       timeout:30000,
				url: window.Http + "/fieldType/list/all",
				type: 'GET',
				headers: {
					'Authorization': "Bearer " + sessionStorage.getItem('Token')
				},
				success: function (res) {
					if (res.code == 200) {
						let dealDataArr = function(data){
							data.forEach(function (item, index) {
								item.label= item.fieldName;
								item.value= item.id;
								item.children = item.childrenList;
								if(item.childrenList && item.childrenList.length>0){
									dealDataArr(item.childrenList);
								}
							})
						}
						dealDataArr(res.data);
						setSelectTypeRender(res.data);
					}
				}
			})
		}

		var pageNum = 1,pageSize=10,dataCount=0;
		//进行搜索
		$("body").on("click",'.searchData',function (e){
			e.preventDefault();
			$('.isShow').removeClass('disabledNone')
			let data1 = layui.form.val("serachForm");
			if(data1.dataType == 2){
				$('#productTable').addClass('disabledNone')
				$('#catalogueTable').removeClass('disabledNone')
			}else{
				$('#productTable').removeClass('disabledNone')
				$('#catalogueTable').addClass('disabledNone')
			}
			requestData(data1);
		})
		var dataDirectory= [];//数据目录
		//搜索数据资源
		function requestData(data={}){
			var indexLoad = layer.load(1);
			data.pageNum = pageNum;
			data.pageSize = pageSize;
			data.typeIdList = selectTypeIdList;
			data.status = 0;
			let Url = "";
			if(data.dataType == 1){
				Url = "/dataProduct/list";
			}else if(data.dataType == 2){
				Url = "/datasourceList/list";
			}else{
				Url = "/datasourceBase/list";
			}
			$.ajax({
       timeout:30000,
				url: window.Http + Url,
				type: 'GET',
				headers: {
					'Authorization': "Bearer " + sessionStorage.getItem('Token')
				},
				data: data,
				success: function (res) {
					layer.close(indexLoad);
					if(res.code == 200){
						renderTableDom(data.dataType,res.data||res.rows);
						dataCount = res.total || 0;
						$("#dataCount").text(dataCount);
						if(pageNum == 1){
							//执行一个laypage实例
							layui.laypage.render({
								elem: 'TablePage', //注意，这里的 test1 是 ID，不用加 # 号
								count: dataCount, //数据总数，从服务端得到
								limit: pageSize,
								groups: 5,
								jump: function (obj, first) {
									if(!first){
									  layer.load(1)
									  pageNum = obj.curr;
									  requestData(data);
									}
								}
							});
						}
					}else if(res.code == 401){
						layer.msg("请进行登录");
					}
				},error:function(err){
					layer.close(indexLoad);
				}
			})
		}
		//渲染表格节点
		function renderTableDom(serachType,data){
			if(serachType == 2){//数据目录
				dataDirectory = data || [];
				$("#catalogueTable tbody").empty()
				if (data && data.length > 0) {
					let html = "";
					data.forEach(function (val, index) {
						html += `<tr dataId=${val.id} sourceId=d=${val.sourceId}">
								<td>${index + 1}</td>
								<td>${val.sourceName}</td>
								<td>${val.tableRepresentation}</td>
								<td>${val.tableClassAlias}</td>
								<td>${val.tableKeywords}</td>
								<td>
									<a class="layui-btn layui-btn-xs text-white mr-2 tableStruct">表结构</a>
									<a class="layui-btn layui-btn-xs text-white mr-2 checkInfo">详情</a>
								</td>
							</tr>`
					})
					$("#catalogueTable tbody").append(html);
				} else {
					let html = `<tr><td colspan="8" style="text-align:center">暂无数据</td></tr>`
					$("#catalogueTable tbody").append(html);
				}
			}else{//数据资源/产品
				$("#productTable tbody").empty()
				if (data && data.length > 0) {
					let html = "";
					let state = "可用";
					data.forEach(function (val, index) {
						if (val.status == -1) {
							state = "待提交";
						}else if (val.status == 2) {
							state = "待审核";
						}else if (val.status == 0) {
							state = "已上架";
						}else{
							state = "已下架";
						}
						let childHtml = "";
						if(val.fieldTypeList && val.fieldTypeList.length>0){
							val.fieldTypeList.forEach(function (item, i) {
								childHtml += `<span>[${item.fieldName}]</span>`
							})
						}else{
							childHtml = "—";
						}
						html += `<tr dataId=${val.id}>
								<td>${index + 1}</td>
								<td>${val.resourceName||val.productName}</td>
								<td>${val.visitCount||0}/${val.buyCount||0}</td>
								<td>${childHtml || "—"}</td>
								<td>${val.ownUserId || val.createBy}</td>
								<td>${val.usableNumber || "暂无"}</td>
								<td>${val.createTime}</td>
								<td style="width:200px">${val.brief}</td>
								<td><a class="layui-btn layui-btn-xs text-white mr-2 checkInfo">详情</a></td>
							</tr>`
					})
					$("#productTable tbody").append(html);
				} else {
					let html = `<tr><td colspan="8" style="text-align:center">暂无数据</td></tr>`
					$("#productTable tbody").append(html);
				}
			}

		}
		//执行一个laypage实例
		layui.laypage.render({
			elem: 'TablePage', //注意，这里的 test1 是 ID，不用加 # 号
			jump: function (obj, first) {
				pageNum = obj.curr;
				let data1 = layui.form.val("serachForm");
				requestData(data1);
			}
		});

		// 查看详情
		$('#productTable').on('click','.checkInfo',function(){
			let id=$(this).parents('tr').attr('dataId');
			let data = layui.form.val("serachForm");
			if(data.dataType == 1){
				window.location.href = './serviceDetial.html?productId='+id;
			}else{
				window.location.href = './dataStoreDetial.html?sourceId='+id;
			}
		})
		$('#catalogueTable').on('click','.checkInfo',function(){
			let sourceId=$(this).parents('tr').attr('sourceId');
			window.location.href = './dataStoreDetial.html?sourceId='+sourceId;
		})
		//查看表结构
		$('#catalogueTable').on('click','.tableStruct',function(){
			let id=$(this).parents('tr').attr('dataId');
			dataDirectory.forEach((val,index)=>{
				if(val.id == id){
					layer.open({
					  type: 1,
					  title:"表结构",
					  shadeClose: true, //开启遮罩关闭
					  area: ['600px', '400px'],
					  content: renderTableStruct(JSON.parse(val.tableStruct))
					});
				}
			})
		})
		//组装表结构弹窗
		function renderTableStruct(data){
			let tbodyhtml = "";
			data.forEach(function (val, index) {
				let type = "";
				switch (val.dataType){
					case 0:type = "整数";break;
					case 1:type = "长整数";break;
					case 2:type = "字节";break;
					case 3:type = "浮点数";break;
					case 4:type = "时间";break;
					case 5:type = "字符串";break;
					default:break;
				}
				tbodyhtml += `<tr dataId=${val.id} sourceId=d=${val.sourceId}">
						<td>${index + 1}</td>
						<td>${val.name}</td>
						<td>${val.columnName}</td>
						<td>${type}</td>
						<td>${val.remark}</td>
					</tr>`
			})
			let tabble = `<table class="layui-table">
							<thead class="thead-dark">
								<tr>
									<th scope="col" style="width: 60px;">序号</th>
									<th scope="col">资源名称</th>
									<th scope="col">对应结构</th>
									<th scope="col">数据类型</th>
									<th scope="col">备注说明</th>
								</tr>
							</thead>
							<tbody>
								${tbodyhtml}
							</tbody>
						</table>`
			return tabble;
		}

	</script>


</body>

</html>
